<template>
  <div class='container'>
    <el-row class="rowSize">
      <el-col :span="6">
        <p>【题型】：{{ questionsList.questionType  | questionTypes}}题</p>
      </el-col>
      <el-col :span="6">
        <p>【编号】：{{ questionsList.id }}</p>
      </el-col>
      <el-col :span="6">
        <p>【难度】：{{ questionsList.difficulty | difficultys }}</p>
      </el-col>
      <el-col :span="6">
        <p>【标签】：{{ questionsList.tags }}</p>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <p>【学科】：{{ questionsList.subjectName }}</p>
      </el-col>
      <el-col :span="6">
        <p>【目录】：{{ questionsList.directoryName }}</p>
      </el-col>
      <el-col :span="6">
        <p>【方向】：{{ questionsList.direction }}</p>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <p>【题干】：</p>
    <p style="color: #0000ff" v-html="questionsList.question"></p>

     <!-- 单选或多选区域 -->
    <p v-if="questionsList.questionType !== '3'"> {{ questionsList.questionType  | questionTypes}}题 选项：(以下选中为正确答案)</p>
    <!-- 单选 -->
    <div v-if="questionsList.questionType === '1'">
      <div class="line"  v-for="item in questionsList.options" :key="item.id">
        <el-radio :value="isTrue" :label="item.code">{{ item.title }}</el-radio>
      </div>
    </div>
    <!-- 多选 -->
    <div v-else-if="questionsList.questionType === '2'">
      <p v-for="item in questionsList.options" :key="item.id">
      <el-checkbox :value="checkList" :label="item.code">{{ item.title }}</el-checkbox>
      </p>
    </div>
    <el-divider></el-divider>

    <!-- 参考答案 -->
    <div>
      【参考答案】：
      <el-button type="danger" size="small" @click="isShowVideo = true">视频答案预览</el-button>
      <el-row v-if="isShowVideo" class="video">
         <video :src="questionsList.videoURL" controls="controls"></video>
      </el-row>
    </div>
    <el-divider></el-divider>
    <!-- 答案解析 -->
    <div>
      <el-row>
        <el-col :span="24">
          【答案解析】：
          <p  class="answer" v-if="questionsList.questionType === '1' || '2'" v-html="questionsList.answer"></p>
        </el-col>
      </el-row>
    </div>
    <el-divider></el-divider>

    <!-- 题目备注 -->
    <div>
      【题目备注】：{{ questionsList.remarks }}
    </div>
  </div>
</template>

<script>
// 导入基础题库详情
import { detail } from '@/api/hmmm/questions'

export default {
  name: 'QuestionsPreview',

  props: {
    userId: {
      type: Object,
      required: true
    }
  },

  data () {
    return {
      // 题目编号列表
      questionsList: {},
      // 单选
      isTrue: '',
      // 多选框数据
      checkList: [],
      // 是否展示video
      isShowVideo: false
    }
  },

  watch: {
    // 深度侦听
    questionsList: {
      deep: true,
      immediate: true,
      handler: function (newVal) {
        // 判断是单选还是多选
        if (newVal.questionType === '1') {
        // 单选
          this.isTrue = newVal.options.filter(item => item.isRight === 1).map(item => item.code)[0]
        }
        // 多选
        if (newVal.questionType === '2') {
          this.checkList = newVal.options.filter(item => item.isRight === 1).map(item => item.code)
        }
      }
    }
  },

  created () {
    this.detail()
  },

  methods: {
    // 关闭题目预览
    close () {
      this.$emit('close')
    },

    // 获取题库数据
    async detail () {
      try {
        const res = await detail(this.userId)
        this.questionsList = res.data
      } catch (err) {
        this.questionsList = {
          questionType: '1',
          id: 25,
          difficulty: 3,
          tags: 'css3,bfc',
          subjectName: '前端',
          directoryName: 'css基础',
          direction: '企业服务',
          question: '1 + 1 等于几？',
          options: [
            { id: 96, questionsID: 24, code: 'A', title: '1', img: '', isRight: 0 },
            { id: 97, questionsID: 24, code: 'B', title: '2', img: '', isRight: 1 },
            { id: 98, questionsID: 24, code: 'C', title: '3', img: '', isRight: 0 },
            { id: 99, questionsID: 24, code: 'D', title: '4', img: '', isRight: 0 }
          ],
          answer: '无',
          remarks: '无'
        }
      }
    }
  },

  filters: {
    // 难度过滤器
    difficultys (val) {
      const difficult = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return difficult[val]
    },

    // 题型过滤器
    questionTypes (val) {
      const questions = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return questions[val]
    }
  }
}
</script>

<style scoped >
.rowSize {
  font-size: 13px;
}
.line {
  line-height: 25px;
}
.close {
  text-align: right ;
}
.answer {
  display: inline-block;
}
.video {
  width: 400px;
  height: 300px;
}
.video video {
  width: 100%;
  height: 100%;
}
</style>
